<template>
<el-form ref="staff" :model="staff" label-width="80px">
  <el-form-item label="姓名" prop="username"><el-input v-model="staff.username" placeholder="输入姓名" class="w300"></el-input></el-form-item>
  <el-form-item label="账号" prop="account"><el-input  v-model="staff.account" placeholder="输入账号" class="w300"></el-input></el-form-item>
  <el-form-item label="密码" prop="password"><el-input v-model="staff.password" placeholder="输入密码" class="w300" show-password></el-input></el-form-item>
  <el-form-item label="确认密码" prop="repeatPassword"><el-input v-model="staff.repeatPassword" placeholder="输入确认密码" class="w300" show-password></el-input></el-form-item>
  <el-form-item label="职位" prop="position_id">
    <el-select v-model="staff.position_id" placeholder="选择职位" class="w300">
      <el-option :label="position.title" :value="position.id" :key="position.id" v-for="(position,index) in common.positionList"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="createStaff">立即提交</el-button>
    <el-button type="info" @click="resetStaff">重置</el-button>
  </el-form-item>
</el-form>
</template>

<script>
  import {mapState} from "vuex"
  import {addStaff} from '@/apilist/Personnel'
    export default {
        name: "addStaff",
        data(){
            return {
                staff: {
                    username: '',
                    account: '',
                    password: '',
                    repeatPassword: '',
                    position_id: '',
                },
            }
        },
        computed: {
            ...mapState("Common",["common"]),
        },
        methods: {
          createStaff(){
              addStaff(this.staff).then(res => {
                  this.$message({
                      type: 'success',
                      message: res.msg,
                      onClose: ()=>{
                          this.resetStaff()
                      }
                  });
              });
          },

            resetStaff(){
              this.$refs['staff'].resetFields();
            },
      },
    }
</script>

<style scoped>

</style>
